<template>
  <div class="template-index-Lu">
    <commpVxeTable
      :key="reCommpVxeTable"
      :conditionBtnRow="true"
      :config="dataConfig()"
      :columns="columns()"
      :formItem="formItem"
      @checkboxChange="checkboxChange"
      ref="administrativeOffice"
      @searchEvent="searchEvent"
      @resetEvent="resetEvent"
      >
      <template v-slot:externalOperations="{data}"  >
        <vxe-form-item>
          <template>
            <!-- <a-button v-if="linkName == '加班值班统计'" class="blue-btn" style="margin-right:10px;" @click="">导出</a-button> -->
          </template>
        </vxe-form-item>
      </template>
      <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
        <a-form layout="inline" class="search-form" >
          <a-form-item>
              <a-button class="blue-btn" @click="viewRor(row)">查看</a-button>
              <!-- <a-button class="blue-btn mar-left-wu" @click="viewRor(row)">修订</a-button> -->
          </a-form-item>
          <a-form-item>
                <a-button
                    v-if="linkName=='我的已办'&&row.fhjmc=='科室审批'&&row.fblzt=='待办'"
                    class="red-btn mar-left-wu"
                    @click="returnStaeClick(row)">
                    撤回
                </a-button>
            </a-form-item>
        </a-form>
      </template>
    </commpVxeTable>
    <applicationForm ref="applicationFormRef" :formData="formData" :linkName="linkName" :stepNums="stepNums" @success="success"></applicationForm>
  </div>
</template>
<script>
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import applicationForm from '../index/applicationForm'
import {returnStart,} from './service/index.js'
export default {
  components: {
    commpVxeTable,
    applicationForm,
  },
  props:{
    linkName:{
      type:String,
      default:'',
      required:false,
    },
    stepNum:{
      type:String,
      default:'',
      required:false,
    }
  },
  data() {
    return {
      reCommpVxeTable: '',
      paramet: {},
      parametMe: {},
      parametJk: {},
      parametXiu: {},
      dataTableConfig: {
        api: assessCheckApi.list,
        rowId: 'id',
        urlType: true,
        paramet:{
          // fhjmc: this.linkName,
        }
      },
      dataTableConfigMe: {
        api: assessCheckApi.myJobPage,
        rowId: 'id',
        urlType: true,
        paramet:{
          fblzt:'已办'
        }
      },
      dataTableConfigJk: {
        api: assessCheckApi.flowJkPage,
        rowId: 'id',
        urlType: true,
        paramet:{
        }
      },
      dataTableConfigXiu: {
        api: assessCheckApi.Pagesjxd,
        rowId: 'id',
        urlType: true,
        paramet:{
        }
      },
      columnsVxe: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '姓名',
          field: 'fxm',
          width: 100,
        },{
          title: '申请时间',
          field: 'fjbzbsqrq',
          width: 150,
        },{
          title: '加班/值班事由',
          field: 'fjbzbsy',
        },{
          title: '加班/值班开始时间',
          field: 'fjbzbkssj',
          width: 150,
        },{
          title: '加班/值班结束时间',
          field: 'fjbzbjssj',
          width: 150,
        },{
          title: '环节名称',
          field: 'fhjmc',
          width: 100,
        },{
          title: '流程状态',
          field: 'flczt',
          width: 100,
        },{
          title: '科室意见',
          field: 'fksspr',
        },{
          title: '分管领导意见',
          field: 'ffgspr',
        },{
          title: '单位领导意见',
          field: 'fdwldspr',
        },{
          title: '操作',
          field: 'jobid',
          width: 100,
          slots: {
          // 使用插槽模板渲染
            default: 'operation_btn',
          },
        }
      ],
      columnsVxeMe: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '姓名',
          field: 'fxm',
          width: 100,
        },{
          title: '申请时间',
          field: 'fjbzbsqrq',
          width: 150,
        },{
          title: '加班/值班事由',
          field: 'fjbzbsy',
        },{
          title: '加班/值班开始时间',
          field: 'fjbzbkssj',
          width: 150,
        },{
          title: '加班/值班结束时间',
          field: 'fjbzbjssj',
          width: 150,
        },{
          title: '环节名称',
          field: 'fhjmc',
          width: 100,
        },{
          title: '流程状态',
          field: 'flczt',
          width: 100,
        },{
          title: '操作',
          field: 'jobid',
          width: 200,
          slots: {
          // 使用插槽模板渲染
            default: 'operation_btn',
          },
        }
      ],
      columnsVxeJk: [
      {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '姓名',
          field: 'fxm',
          width: 100,
        },{
          title: '部门',
          field: 'fbm',
          width: 150,
        },{
          title: '申请时间',
          field: 'fjbzbsqrq',
          width: 150,
        },{
          title: '加班/值班事由',
          field: 'fjbzbsy',
        },{
          title: '加班/值班开始时间',
          field: 'fjbzbkssj',
          width: 150,
        },{
          title: '加班/值班结束时间',
          field: 'fjbzbjssj',
          width: 150,
        },{
          title: '环节名称',
          field: 'fhjmc',
          width: 100,
        },{
          title: '时长',
          field: 'fjbzbsc',
          width: 100,
        },{
          title: '流程状态',
          field: 'flczt',
          width: 100,
        },{
          title: '操作',
          field: 'jobid',
          width: 200,
          slots: {
          // 使用插槽模板渲染
            default: 'operation_btn',
          },
        }
      ],
      formItem: [
        {
          label: '姓名',
          model: 'fxm',
        },{
          label: '部门',
          model: 'fbm',
          placeholder: '类别',
          type:'Select',
          dictionaryType:'OA申请科室单位'
        },{
          label: '事由',
          model: 'fjbzbsy',
        },
        // {
        //   label: '姓名',
        //   model: 'fxm',
        // },{
        //   label: '姓名',
        //   model: 'fxm',
        // },{
        //   label: '姓名',
        //   model: 'fxm',
        // },{
        //   label: '姓名',
        //   model: 'fxm',
        // },{
        //   label: '姓名',
        //   model: 'fxm',
        // },
      ],
      jobidList: [],
      stepNums: 0,
      formData: {},

    }
  },
  created(){
    this.stepNums = Number(this.stepNum)
    this.paramet = JSON.parse(JSON.stringify(this.dataTableConfig.paramet))
    this.parametMe = JSON.parse(JSON.stringify(this.dataTableConfigMe.paramet))
    this.parametJk = JSON.parse(JSON.stringify(this.dataTableConfigJk.paramet))
    this.parametXiu = JSON.parse(JSON.stringify(this.dataTableConfigXiu.paramet))
  },
  methods: {
    dataConfig(){
      let data = {}
      if(this.linkName == '我的已办'){
        data = this.dataTableConfigMe
      } else if(this.linkName == '加班值班统计'){
        data = this.dataTableConfig
      } else if(this.linkName == '流程监控'){
        data = this.dataTableConfigJk
      } else if(this.linkName == '数据修订'){
        data = this.dataTableConfigXiu
      }
      return data
    },
    columns(){
      let data = []
      if(this.linkName == '我的已办'){
        data = this.columnsVxeMe
      } else if(this.linkName == '加班值班统计'){
        data = this.columnsVxe
      } else if(this.linkName == '流程监控'){
        data = this.columnsVxeJk
      } else if(this.linkName == '数据修订'){
        data = this.columnsVxe
      }
      return data
    },
     // 勾选
     checkboxChange(val){
      //console.log('已选择',val)
      this.jobidList = []
      if(val.length){
        val.forEach(item => {
            this.jobidList.push(item.jobid)
        });
      }
    },
    // 搜索
    searchEvent(){
      // this.dataTableConfig.paramet = {
      //     ...this.dataTableConfig.paramet,
      // }
      // //console.log(this.dataTableConfig.paramet)
      if(this.linkName == '我的已办') {
        this.dataTableConfigMe.paramet = {
          ...this.parametMe,
        }
      } else if(this.linkName == '加班值班统计'){
        this.dataTableConfig.paramet = {
          ...this.paramet,
        }
      } else if(this.linkName == '流程监控'){
        this.dataTableConfigJk.paramet = {
          ...this.parametJk,
        }
      } else if(this.linkName == '数据修订'){
        this.dataTableConfigXiu.paramet = {
          ...this.parametXiu,
        }
      }
    },
    // 重置
    resetEvent(){
      if(this.linkName == '我的已办') {
        this.dataTableConfigMe.paramet = {
          ...this.parametMe,
        }
      } else if(this.linkName == '加班值班统计'){
        this.dataTableConfig.paramet = {
          ...this.paramet,
        }
      } else if(this.linkName == '流程监控'){
        this.dataTableConfigJk.paramet = {
          ...this.parametJk,
        }
      } else if(this.linkName == '数据修订'){
        this.dataTableConfigXiu.paramet = {
          ...this.parametXiu,
        }
      }
    },
    // 添加申请
    addFor(){
        this.$nextTick(_ => {
            this.$refs.applicationFormRef.applicationFormVisible= true
        })
    },
    // 删除
    deleteFor(row){
      var that = this
      that.$confirm({
        title: '您确定要删除这条申请吗?',
        content: '',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          //console.log('jobid',row.jobid)
          // deleteLgqsFlowJob({jobids:row.jobid}).then(res => {
          //   //console.log(res)
          //   if(res.code == 200){
          //     that.reCommpVxeTable = Date.now()
          //     that.$message.success(res.message)
          //   } else {
          //     that.$message.warning(res.message)
          //   }
          // })
        },
        onCancel() {
          //console.log('Cancel');
        },
      });
    },
    // 批量删除
    deleteList(){
      var that = this
      if(that.jobidList.length == 0){
        that.$message.warning('请选择删除项目')
      } else {
        that.$confirm({
          title: '您确定要删除这些申请吗?',
          content: '',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            let list = that.jobidList.toString()
            // deleteLgqsFlowJob({jobids:list}).then(res => {
            //   //console.log(res)
            //   if(res.code == 200){
            //     that.reCommpVxeTable = Date.now()
            //     that.$message.success(res.message)
            //   } else {
            //     that.$message.warning(res.message)
            //   }
            // })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      }
    },
    // 办理
    viewRor(row){
      this.$refs.applicationFormRef.applicationFormVisible = true
      this.formData = {
        ...row
      }
      this.formData.id = row.oaid

      //console.log('formData',this.formData)

      let jobid = row.jobid
      // queryJobByJobId({jobid:jobid}).then(res => {
      //   //console.log(res)
      // })
        this.$nextTick(_ => {
            this.$refs.applicationFormRef.applicationFormVisible = true
        })
    },
    // 撤回
    returnStaeClick(row){
      let that = this
      that.$confirm({
          title: '您确定要撤回这条申请吗?',
          content: '',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            let data = {
              jobid: row.jobid,
              opinion: '撤回申请',
              oaId: row.oaid
            }
            returnStart(data).then(res => {
              if(res.code == 200){
                that.$message.success(res.message)
                that.reCommpVxeTable = Date.now()
              } else {
                that.$message.warning(res.message)
              }
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
    },
    // 弹窗提交成功
    success(){
      // 刷新表格 清空id数组
      this.$refs.administrativeOffice.resetEvent()
      this.jobidList = []
    },
  },
}
</script>
<style>
@import url('../../css/oaClass.css');
</style>
